<template>
  <div>
    <div class="title_box">
      <div class="iconfont icon-left" @click="$router.push('/home')"></div>
      <div class="title">我的订单</div>
      <div></div>
    </div>

    <div class="nav">
      <div
        v-for="(item, index) in navBtn"
        :key="index"
        @click="navSkip(index)"
        :class="conId == index ? 'con' : 'nav-item'"
      >
        {{ item }}
      </div>
    </div>
   
    <div class="list" v-if="goodsData[conId].length != 0">
      <ul>
        <li v-for="(item, index) in goodsData[conId]" :key="index">
          <div class="left">
            <img :src="item.goodsLogo" alt="" />
          </div>
          <div class="right">
            <div class="goods_name">{{ item.goodsName }}</div>
            <div class="price_num">
              <div class="price">￥{{ item.goodsPrice }}
                <span>x{{ item.num }}</span>
              </div>
              <div class="num">
                <span class="title">总价</span>
                <span>￥{{ item.num * item.goodsPrice}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="default" v-else>还没有订单哦~</div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      navBtn: ["全部", "待付款", "已付款"],
      conId: 0,
      goodsData:[[],[],[]]
    };
  },
  methods: {
    navSkip(index) {
      this.conId = index;
    },

    show(arr,index){
      let data = arr
      for(let i = 0; i<data.length; i++){
        this.goodsData[index].push(data[i])
      }
    },
  },
  created(){
    this.conId = this.$route.query.conId;
    this.show(this.$store.getters.getData.carGoods,0)
    this.show(this.$store.getters.getData.PaidGoods,0)
    this.show(this.$store.getters.getData.carGoods,1)
    this.show(this.$store.getters.getData.PaidGoods,2)
  },
};
</script>

<style lang="less" scoped>
.default{
    text-align: center;
    margin-top: 100px;
}

.nav {
  display: flex;
  justify-content: space-around;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  .con {
    font-weight: 900;
    color: #fd4200;
  }
}
.list {
  ul {
    li {
      overflow: hidden;
      margin: 10px;
      padding: 10px;
      background: #fff;
      display: flex;
      .inp {
        flex: 1;
        position: relative;
        input {
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -7px 0px 0px -7px;
        }
      }
      .left {
        width: 160px;
        height: 160px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 62%;
        margin-left: 10px;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
        .goods_name {
          font-size: 18px;
        }
        .price_num {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          margin: 10px 0;
          .price {
            font-size: 26px;
            span{
              font-size: 20px;
            }
          }
          .num {
            height: 34px;
            line-height: 34px;
            // background: #f7f7f7;
            border-radius: 20px;
            span {
              color: #333;
              font-weight: 600;
              &:nth-child(odd) {
                font-size: 20px;
              }
              &.title{
                font-size: 20px;
                padding: 0px;
                margin-right: 6px;
              }
            }
          }
        }
      }
    }
  }
}

    .title_box {
      height: 60px;
      line-height: 60px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }
</style>
